<template>
  <div id="container"></div>
</template>

<script setup>
import dataJson from '@/utils/gg.json'
import { ref, onMounted, reactive, defineProps } from 'vue'
let props = defineProps({
  markerData: Array,
})
const getMap = () => {
  //初始化地图对象，加载地图
  var satellite = new AMap.TileLayer.Satellite();
  var roadNet = new AMap.TileLayer.RoadNet();
  let maskData = []
  dataJson.features.forEach(item => {
    if (item.geometry.type == "Polygon") {
      // maskData.concat(item.geometry.coordinates)
      maskData.push(item.geometry.coordinates)
    }

  })
  console.log(maskData);
  let mask = maskData
  // 自定义地图样式

  let map = new AMap.Map("container", {
    viewMode: '3D',
    showLabel: true,
    labelzIndex: 130,
    pitch: 40,
    features:["bg"],
    // resizeEnable: true,
    center: [113.19724, 34.792472],//地图中心点
    zoom: 14,//地图显示的缩放级别
    layers: [
      // new AMap.TileLayer.RoadNet({ opacity: 0, visible: false },)
      satellite,
    ],
    zooms: [13, 20],
    // mapStyle: 'amap://styles/macaron',
    // mapStyle: 'amap://styles/macaron',
    mapStyle: 'amap://styles/grey',
    // mapStyle: 'amap://styles/darkblue',//地图的背景颜色
  });
  // 设置地图样式
  // map.setMapStyle(mapStyle);
  getGeoJson(map)
  // getMark(map)

  // getWeather(map)
}
// 地图区域
function getGeoJson(map) {
  // console.log(dataJson);
  var geojsonLayer = new AMap.GeoJSON({
    geoJSON: dataJson,
    getMarker: function (geojson, lnglat) {
      let marker = new AMap.Marker({
        position: lnglat,
        content: `<div style="writing-mode: vertical-lr;
                  text-orientation: mixed;
                  white-space: nowrap;
                  font-size: 16px;
                  color: #fff;">${geojson.properties.XZQMC}</div>`,
        offset: new AMap.Pixel(-10, -20),
        zIndex: 20,
        zooms: [13, 20],
      })
      return marker
    },
    getPolyline: function (geojson, lnglat) {
      return new AMap.Polyline({
        path: lnglat,
        strokeColor: '#000',
        strokeOpacity: 0.8,
        strokeWeight: 5
      })
    },
    getPolygon: function (geojson, lnglat) {
      var area = AMap.GeometryUtil.ringArea(lnglat[0])
      var polygon = new AMap.Polygon({
        path: lnglat,
        fillOpacity: 0,// 面积越大透明度越高
        strokeOpacity: 1,
        strokeColor: '#4879b3',
        fillColor: '#fff',
        strokeWeight: 3,
        strokeStyle: "solid"
      });
      polygon.on('click', function () {
        // 处理点击事件
        const properties = geojson.properties;
        // 根据区域属性进行操作
        console.log(properties);
      });

      return polygon;
    },


  });
  map.add(geojsonLayer);
}


onMounted(() => {
  getMap()
  // console.log(props.markerData, "aaaa")
})

function getMark(map) {

  props.markerData.forEach(itme => {
    // console.log(itme);
    let markerLocation = itme.geometry.coordinates

    let prevMarker = null
    if (prevMarker) {
      prevMarker.setIcon(null);
    }
    var newMarker = new AMap.Marker({
      position: [markerLocation[0], markerLocation[1]], // Marker 的经纬度
      icon: 'https://example.com/new-marker.png', // 新的 Marker 图标的 URL
    });

    // 将新的 Marker 添加到地图上
    newMarker.setMap(map);

    // 将新的 Marker 赋值给 prevMarker 变量，以便下次清除使用
    prevMarker = newMarker;
  })
  // 创建新的 Marker
  // var newMarker = new AMap.Marker({
  //   position: [lng, lat], // Marker 的经纬度
  //   icon: 'https://example.com/new-marker.png', // 新的 Marker 图标的 URL
  // });

  // // 将新的 Marker 添加到地图上
  // newMarker.setMap(map);

  // // 将新的 Marker 赋值给 prevMarker 变量，以便下次清除使用
  // prevMarker = newMarker;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  /* color: rgb(233, 251, 43); */
  /* color: rgb(249, 241, 11,0.5); */
  color: transparent;
}
</style>
